<template>
    <div class="navigation">
        <Tabs type="card"
              v-model:value="currentTab"
              @on-click="choose"
              @on-tab-remove="removeTmpTab">
            <TabPane icon="ios-list-box-outline" label="导航列表" name="nav">
                <NavList :navListTmp="navList" @nav-edit="navEdit"></NavList>
            </TabPane>

            <TabPane icon="ios-open-outline" label="导航展示" name="navShow">
                <NavShow :navList="navList" @nav-edit="navEdit"></NavShow>
            </TabPane>

            <TabPane v-for="(obj,i) in tmpTab"
                     :key="obj.navId"
                     icon="ios-pin-outline"
                     :label="obj.navName"
                     :name="obj.navCode"
                     closable>

                <HowUse v-if="'howUse' == obj.navCode"></HowUse>
                <Vip v-if="'vip' == obj.navCode"></Vip>
                <Education v-if="'education' == obj.navCode"></Education>
                <Suggestion v-if="'suggestion' == obj.navCode"></Suggestion>
                <Joke v-if="'joke' == obj.navCode"></Joke>
                <Icu v-if="'icu' == obj.navCode"></Icu>
                <Love v-if="'love' == obj.navCode"></Love>
                <Offer v-if="'offer' == obj.navCode"></Offer>
            </TabPane>
        </Tabs>


    </div>
</template>

<script>
    import NavList from "@/components/nav/NavList"
    import NavShow from "@/components/nav/NavShow"

    import HowUse from "@/components/nav/howUse/HowUse"
    import Vip from "@/components/nav/vip/Vip"
    import Education from "@/components/nav/education/Education"
    import Suggestion from "@/components/nav/suggestion/Suggestion"
    import Joke from "@/components/nav/joke/Joke"
    import Icu from "@/components/nav/icu/Icu"
    import Love from "@/components/nav/love/Love"
    import Offer from "@/components/nav/offer/Offer"

    export default {
        name: "",
        components: {
            NavList, NavShow,
            HowUse, Vip, Education, Suggestion, Joke, Icu, Love, Offer
        },
        data() {
            return {
                //当面tab
                currentTab: "nav",
                //临时tab
                tmpTab: [],
                //导航列表
                navList: [],
            }
        },
        methods: {
            //改变tab
            choose: function (name) {
                if (name == "nav") {
                    this.selectNavList()
                }
                if (name == "navShow") {
                    this.axios.get(`/login/nav/navList`, {
                        params: {
                            status: 1
                        }
                    })
                        .then((data) => {
                            this.navList = data.data
                        })
                    this.$Message.destroy();
                }
            },
            //查询导航列表
            selectNavList: function () {
                this.axios.get(`/login/nav/navList`)
                    .then((data) => {
                        this.navList = data.data
                    })
            },
            //编辑导航
            navEdit: function (navCode) {
                for (let i of this.navList) {
                    if (navCode == i.navCode) {
                        this.currentTab = navCode
                        for (let j = 0; j < this.tmpTab.length; j++) {
                            if (navCode == this.tmpTab[j].navCode) {
                                return
                            }
                        }
                        this.tmpTab.push(i)
                    }
                }
            },
            //关闭临时tab
            removeTmpTab: function (name) {
                let tmpArray = this.tmpTab;
                for (let i = 0; i < tmpArray.length; i++) {
                    if (name == tmpArray[i].navCode) {
                        tmpArray.delete(i)
                        this.tmpTab = tmpArray
                    }
                }
            }
        },
        mounted() {
            this.selectNavList();
        }
    }
</script>

<style scoped>
    .navigation .navUrl {
        display: block;
        height: auto;
        weight: 100%;
    }

</style>